<!DOCTYPE html>
<html>

<head>
<meta charset="utf8" />
<title>登录</title>

<link rel="stylesheet" href="{{ url_for('static', filename='/bootstrap-5.1.3-dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/index.css') }}" />
</head>

<body>

<img class="bgone" src="{{ url_for('static', filename='img/background.jpg') }}" />
<img class="pic" src="{{ url_for('static', filename='img/a.png') }}" />

<div  class="mytable">
	<div class="wel">图书管理系统</div>
	<div class="wel1">Library management system</div>
	<div class="user">
		<div id="yonghu" ><img src="{{ url_for('static', filename='img/yhm.png') }}" /></div>
		<input type="text" id="username" name="username" placeholder="用户名" />
		<div id="username_msg" style="position: absolute;right: 0;bottom: -1.2rem;"></div>
	</div>			
	<div class="password">
		<div id="yonghu"><img src="{{ url_for('static', filename='img/mm.png') }}" /></div>
		<input type="password" id="password" name="password" placeholder="●●●●●●"/>
		<div id="password_msg" style="position: absolute;right: 0;bottom: -1.2rem;"></div>
	</div>
	<input class="mybtn" type="button"  value="登录" />
	<div class="login">还没有账户？<a href="/register">点击注册</a></div>


	<div class="modal fade" id="fail" aria-labelledby="mt" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="mt"></h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<script src="{{ url_for('static', filename='js/jQuery.js') }}"></script>

	<script src="{{ url_for('static', filename='bootstrap-5.1.3-dist/js/bootstrap.js') }}"></script>
	<script src="{{ url_for('static', filename='js/登录注册.js') }}"></script>
	<script>

		var fail = new bootstrap.Modal(document.getElementById('fail'));
		var mt = $("#mt");
		var mb = $(".modal-body");

		// mt.html("登录失败");
        // mb.html("请检查用户名或密码是否正确");
        // fail.show()
        $(".mybtn").click(function (e){
			var username=$("#username").val();
			var password=$("#password").val();
			if(checkForm()){
				$.post("{{url_for('auth.login')}}",{'username': username,'password':password},
					function (result) {
						if(result=="error"){
							mt.html("登录失败");
							mb.html("请检查用户名或密码是否正确");
							fail.show()
						}
						else{
							window.location.href="{{url_for('book_manage.books_getall')}}";
						}
					});
			}
			else{
				e.preventDefault();
			}
		});

	</script>
</div>
</body>
</html>